<template>
  <q-pull-to-refresh ref="pullFresh" class="content-padding" :handler="refresher">
    <!-- 项目层级面包屑 -->
    <breadcrumbs></breadcrumbs>
    <!-- search box -->
    <q-list highlight separator class="search-box">
      <q-item class="bg-white" @click.native="changeStatus">
        <q-item-main>
          <span>{{ $t('断面状态') }}：</span>
          <span style="float: right;">{{ status.label || $t('全部') }}</span>
        </q-item-main>
        <q-item-side right>
          <q-item-tile icon="navigate_next" color="green" />
        </q-item-side>
      </q-item>
    </q-list>
    <!-- 无限滚动 -->
    <q-infinite-scroll ref="scroll" :offset="10" :handler="loadMore">
      <!-- list -->
      <q-list highlight separator class="data-list-box">
        <template v-for="(item,index) in dataList">
          <q-item class="bg-white" :key="index" @click.native="itemClick(item)" v-ripple>
            <q-item-main>
              <div class="row item-head">
                <div class="" style="width: 90px;">{{ item.csec_name }}</div>
                <div class="col text-center">{{ item.csec_type }}</div>
                <template v-if="'1G01' === item.csec_status">
                  <div class="item-head-right text-green-9">{{ $t('在测') }}</div>
                </template>
                <template v-else-if="'1G02' === item.csec_status">
                  <div class="item-head-right text-red-9">{{ $t('封存') }}</div>
                </template>
                <template v-else>
                  <div class="item-head-right text-grey-9">{{ $t('未知') }}</div>
                </template>
                
              </div>
              <div class="row item-body text-grey-8">
                <div class="col-4">{{ $t('标段') }}：</div>
                <div class="col-8">{{ item.tendername }}</div>
                <div class="col-4">{{ $t('工点') }}：</div>
                <div class="col-8">{{ item.wsguidname }}</div>
                <div class="col-4">{{ $t('最近测量时间') }}：</div>
                <div class="col-8">{{ item.updatetime }}</div>
              </div>
            </q-item-main>
          </q-item>
          <!-- <q-item-separator :key="index" /> -->
        </template>
      </q-list>
      <!-- 加载提示 -->
      <div class="row justify-center infinite-bottom-box">
        <!-- <q-spinner-dots slot="message" :size="40" /> -->
        {{ loadingText }}
      </div>
    </q-infinite-scroll>

    <!-- 二级界面 -->
    <detail ref="detail"></detail>
  </q-pull-to-refresh>
</template>

<script>
import baseMixins from 'pages/mixins/index.js';
import detail from './components/detailPage.vue';
export default {
  mixins: [baseMixins],
  components: {
    detail
  },
  data() {
    return {
      status: {},
      dataList: [],
      loadingText: this.$t('加载中') + '....',
      locked: true
    };
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.$refs.pullFresh.trigger();
      });
    },
    refresher(done) {
      this.loadingText = this.$t('加载中') + '....';
      this.dataList = [];
      // this.$refs.scroll.stop();
      this.getCsecList(1).then(result => {
        this.dataList = result.data;
        // 无限滚动
        this.locked = false;// 第一次重置
        this.$refs.scroll.reset();
        this.$refs.scroll.fetching = false;// 手动重置无限滚动刷新锁状态
        this.$refs.scroll.resume();// poll
      }).catch(err => {
        this.loadingText = err.msg;
      }).finally(() => {
        done();
      });
    },
    changeStatus() {
      this.$q.actionSheet({
        title: this.$t('请选择断面状态'),
        grid: false,
        actions: [
          {
            label: this.$t('全部'),
            icon: 'select_all',
            color: 'secondary',
            value: ""
          },
          {
            label: this.$t('在测'),
            icon: 'donut_large',
            color: 'positive',
            value: "1G01"
          },
          {
            label: this.$t('封存'),
            icon: 'speaker_notes_off',
            color: 'negative',
            value: "1G02"
          }
        ]
      }).then(action => {
        this.status = action;
        this.$refs.pullFresh.trigger();
      }).catch(err => err);
    },
    getCsecList(page) {
      let pars = {
        code: this.currentNode.fcode,
        level: this.currentNode.flevel,
        csec_status: this.status.value || '',
        page: page || 1,
        size: 5
      };
      return this.$axios.getCsecList(pars);
    },
    loadMore(index, done) {
      if(index === 1){
        done(this.locked);
        return;
      }
      // 需要更新DOM后才不会重复的加载more事件
      this.$nextTick(() => {
        this.loadingText = this.$t('加载中') + '....';
        this.getCsecList(index).then(result => {
          this.dataList = this.dataList.concat(result.data);
          done();
        }).catch(err => {
          this.loadingText = this.$t('已经是最后一条数据咯');
        });
      });
    },
    itemClick(item) {
      this.$refs.detail.show(item);
    }
  }
}
</script>

<style lang="less" scoped>
.content-padding{
  // height: calc(100vh - 117px);

  .search-box{
    border: none;
    padding: 0;
    margin-bottom: 10px;
  }

  .data-list-box{
    padding: 0;
    border: none;

    .q-item{
      .q-item-main{
        .item-head{
          margin-bottom: 10px;

          .item-head-right{
            min-width:35px;
            text-align:center;
          }
        }
        .item-body{
          font-size: 12px;

          [class^=col]{
            padding: 2px 0;
          }
        }
      }
    }
  }
}
</style>

